<template>
	<view>
		<simple-toolbar :title="$t('wallet.editWallet.editWallet')">
			<view class="returnToConfirm">
				<el-button @click="navBack">{{ $t('wallet.editWallet.return') }}</el-button>
				<el-button @click="confirm" type="primary" :disabled="success">{{ $t('wallet.editWallet.confirm') }}</el-button>
			</view>
		</simple-toolbar>

		<view class="pad-base form">
			<el-form :model="formData" :rules="rules" ref="formData" label-position="top">
				<el-form-item :label="$t('wallet.editWallet.address')" prop="wallet">
					<el-input v-model="formData.wallet" :placeholder="$t('wallet.editWallet.address_pla')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('wallet.editWallet.coin')" prop="coin_name">
					<el-select v-model="formData.coin" :placeholder="$t('wallet.editWallet.coin_pla')">
						<el-option v-for="item in coinList" :key="item.id" :label="item.coin_name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</view>
	</view>
</template>

<script>
	import {
		wallet
	} from "../../../js_sdk/uni-admin/wallet.js"
	import {
		getCoinList
	} from "@/js_sdk/uni-admin/wallet.js"
	export default {
		data() {
			return {
				operation: '',
				success: false,
				coinList: [],
				formData: {
					wallet: '',
					coin: 0
				},
				rules: {
					wallet: [{
						required: true,
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('wallet.editWallet.address_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
					coin_name: [{
						required: true,
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('wallet.editWallet.coin_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
				}
			}
		},
		onLoad(option) {
			// operation: 1新建 2修改
			this.operation = option.operation
			if (option.operation === '1') return
			this.formData = JSON.parse(decodeURIComponent(option.data));
		},
		async onShow() {
			// let data = uni.getStorageSync('coinList')
			// if (data) {
			// 	if (typeof data == 'string') {
			// 		this.coinList = JSON.parse(uni.getStorageSync('coinList'))
			// 	} else {
			// 		this.coinList = data
			// 	}
			// }
			this.loadData()
		},
		methods: {
			async loadData() {
				try{
					let res = await getCoinList()
					this.coinList = res.data
				}catch(e){
					console.error(e)
				}
			},
			confirm() {
				this.$refs.formData.validate(async valid => {
					if (!valid) return
					let data = {
						wallet: this.formData.wallet,
						coin: this.formData.coin
					}
					if (this.operation === '1') {
						await wallet('post', data)
					} else {
						data.id = this.formData.id
						await wallet('put', data)
					}
					this.success = true
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				});
			},
			navBack() {
				uni.navigateBack()
			}
		},
	}
</script>

<style scoped>
	/deep/ .el-select {
		width: 100%;
	}
</style>
